<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <link rel="icon" href="https://picgo2listen.oss-cn-beijing.aliyuncs.com/imgs/aomaker_light.png" type="image/png">
    <!-- 引入 Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
    <!-- 引入 Alpine.js CDN -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <!-- 引入Chart.js用于圆环图 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- 自定义 Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'aomaker-purple': { light: '#8B5CF6', DEFAULT: '#6366F1', dark: '#4F46E5' },
                        'status-passed': 'var(--color-success, #5CBA95)',
                        'status-failed': 'var(--color-error, #E88A8A)',
                        'status-broken': 'var(--color-warning, #E6B55C)',
                        'status-skipped': 'var(--color-info, #7A9FE2)',
                        'bg-gradient-start': '#F0F3FF',
                        'bg-gradient-end': '#FAFAFD',
                        'legend-bg': 'rgba(255, 255, 255, 0.2)',
                        'legend-border': '#EAEAF5',
                    },
                    borderRadius: {
                        'xl': '1rem',
                        'lg': '0.75rem',
                    },
                    boxShadow: {
                        'neu-outer': '4px 4px 8px rgba(0, 0, 0, 0.04), -4px -4px 8px rgba(255, 255, 255, 0.6)',
                        'neu-inner': 'inset 2px 2px 4px rgba(0, 0, 0, 0.03), inset -2px -2px 4px rgba(255, 255, 255, 0.7)',
                        'neu-card': 'var(--shadow-neu-outer), var(--shadow-neu-inner)',
                        'neu-pill-active': 'inset 2px 2px 4px rgba(0, 0, 0, 0.1)',
                        'pill-hover': '0 1px 4px rgba(0, 0, 0, 0.06)',
                    },
                    fontSize: {
                        '3xl': ['1.75rem', { lineHeight: '2.25rem', fontWeight: '700' }],
                        'xl': ['1.25rem', { lineHeight: '1.75rem', fontWeight: '600' }],
                        'sm': ['0.875rem', { lineHeight: '1.25rem', fontWeight: '400' }],
                        'xs': ['0.75rem', { lineHeight: '1rem', fontWeight: '400' }],
                    },
                    fontFamily: {
                        'sans': ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'],
                    },
                    height: {
                        '14': '3.5rem',
                        '16': '4rem',
                    },
                    minHeight: {
                        '14': '3.5rem',
                        '16': '4rem',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        :root {
            --color-success: #5CBA95;
            --color-error: #E88A8A;
            --color-warning: #E6B55C;
            --color-info: #7A9FE2;
            --shadow-neu-outer: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
            --shadow-neu-inner: inset 0 1px 2px rgba(255, 255, 255, 0.1);
            --purple-glow-1: rgba(139, 92, 246, 0.2);
            --purple-glow-2: rgba(99, 102, 241, 0.2);
            --purple-fade-1: rgba(139, 92, 246, 0.02);
            --purple-fade-2: rgba(99, 102, 241, 0.02);
        }
        /* 基础样式 */
        body {
            background: 
                radial-gradient(circle at 5% 5%, var(--purple-glow-1) 0%, rgba(139, 92, 246, 0.08) 15%, var(--purple-fade-1) 40%, transparent 70%),
                radial-gradient(circle at 95% 95%, var(--purple-glow-2) 0%, rgba(99, 102, 241, 0.08) 15%, var(--purple-fade-2) 40%, transparent 70%),
                linear-gradient(to bottom right, var(--color-from, #F0F3FF), var(--color-to, #FAFAFD));
            @apply min-h-screen font-sans text-sm text-gray-600 antialiased;
            background-attachment: fixed;
            background-size: 200% 200%, 200% 200%, 400% 400%;
            --color-from: #F0F3FF;
            --color-to: #FAFAFD;
            animation: gradientAnimation 25s ease-in-out infinite alternate;
        }
        @keyframes gradientAnimation {
            0% { background-position: 0% 0%, 100% 100%, 0% 50%; }
            25% { background-position: 2% 5%, 95% 97%, 30% 60%; }
            50% { background-position: 0% 15%, 85% 100%, 60% 70%; }
            75% { background-position: 5% 2%, 97% 95%, 70% 40%; }
            100% { background-position: 0% 0%, 100% 100%, 0% 50%; }
        }
        
        .neu-card {
            @apply bg-white/20 rounded-xl p-6 border border-white/30 backdrop-blur-md;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
            transition: all 0.3s ease-out, transform 0.2s ease-out;
            position: relative;
            z-index: 1;
        }
        
        .neu-card:hover {
            @apply bg-white/30 border-white/40;
            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.25) inset, 0 0 20px rgba(99, 102, 241, 0.15);
            transform: translateY(-5px) scale(1.01);
            z-index: 2;
        }
        
        .neu-card:hover::after {
            content: '';
            position: absolute;
            inset: -2px;
            background: linear-gradient(225deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2), transparent 60%);
            border-radius: inherit;
            z-index: -1;
            opacity: 0;
            animation: glow-pulse 2s ease-in-out infinite;
        }
        
        @keyframes glow-pulse {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.7; }
        }
        
        h1 { @apply text-3xl font-bold text-gray-800; }
        h2 { @apply text-xl font-semibold text-gray-800; }
        h3 { @apply text-lg font-semibold text-gray-700; }
        h4 { @apply text-base font-semibold text-gray-700; }
        p, span, div { @apply text-sm; }

        /* 表格样式 */
        thead {
            @apply bg-white/10 sticky top-0 z-10 backdrop-blur-md border-b border-white/20;
        }
        tbody tr {
            @apply border-b border-gray-100/30 h-16;
            @apply transition-colors duration-150;
        }
        tbody tr:hover {
            @apply bg-white/10 backdrop-blur-sm;
        }
        tbody tr:hover .action-button {
             @apply text-aomaker-purple;
        }
        .table-icon {
             @apply h-8 w-8 rounded-lg bg-white/20 backdrop-blur-sm flex items-center justify-center mr-3;
        }
        .status-badge {
             @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
             backdrop-filter: blur(4px);
        }
        .status-dot {
             @apply h-1.5 w-1.5 rounded-full mr-1.5;
        }
        .action-button {
             @apply text-gray-400 hover:text-aomaker-purple focus-ring rounded-full p-1.5 transition-colors duration-150;
        }

        /* 过滤按钮 (Pill) 样式 */
        .filter-pill {
            @apply px-4 py-1.5 rounded-lg text-sm font-medium transition-all duration-150 cursor-pointer bg-white/30 backdrop-blur-sm border border-white/20;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
        }
        .filter-pill:hover {
            @apply bg-white/40;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
        }
        .filter-pill-active {
            @apply text-white shadow-none border-transparent;
        }
        .filter-pill-active[data-status='all'] { @apply bg-aomaker-purple; }
        .filter-pill-active[data-status='passed'] { @apply bg-status-passed; }
        .filter-pill-active[data-status='failed'] { @apply bg-status-failed; }
        .filter-pill-active[data-status='broken'] { @apply bg-status-broken; }
        .filter-pill-active[data-status='skipped'] { @apply bg-status-skipped; }

        /* 模态框样式 */
        .modal { @apply fixed inset-0 z-50 flex items-center justify-center p-4; }
        .modal-overlay { @apply fixed inset-0 bg-black/10 backdrop-blur-sm; }
        .modal-content {
            @apply relative bg-white/20 rounded-xl max-w-4xl w-full max-h-[80vh] overflow-y-auto p-6 border border-white/30 backdrop-blur-md;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
        }
        .modal-close-button { @apply absolute top-4 right-4 text-gray-400 hover:text-gray-700 focus-ring rounded; }
        .log-pre { @apply bg-gray-50/90 text-gray-700 text-xs p-4 rounded-lg overflow-x-auto whitespace-pre-wrap break-words font-mono border border-gray-200/50; }

        /* 统计图例样式 */
        .legend-item {
            @apply flex items-center justify-between p-3 rounded-lg cursor-pointer transition-colors duration-150;
            @apply bg-white/15 backdrop-blur-sm border border-white/20;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
        }
        .legend-item:hover {
             @apply bg-white/25;
        }
        .legend-icon {
             @apply h-3 w-3 mr-2 rounded-sm flex-shrink-0;
        }
        .legend-text {
             @apply text-sm font-medium text-gray-700 mr-auto;
        }
        .legend-value {
             @apply text-sm font-semibold text-gray-800;
        }

        /* 动画效果 */
        .fade-in-down { animation: fadeInDown 150ms ease-out forwards; }
        @keyframes fadeInDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

        /* 可访问性 */
        .focus-ring { @apply focus:outline-none focus:ring-2 focus:ring-aomaker-purple/50 focus:ring-offset-2; }

        /* 表格底部 */
        .table-footer {
            @apply px-6 py-4 bg-white/10 backdrop-blur-sm border-t border-gray-100/30 flex flex-wrap justify-center items-center gap-x-6 gap-y-2 text-xs;
        }

        /* 表格卡片的特殊处理 */
        .neu-card.p-0:hover {
            transform: translateY(-5px) scale(1.005);
        }
        
        .neu-card.p-0:hover::after {
            inset: -1px;
        }
        
        /* 防止表格卡片内的内容被抖动效果影响 */
        .neu-card.p-0:hover .overflow-x-auto,
        .neu-card.p-0:hover table,
        .neu-card.p-0:hover thead,
        .neu-card.p-0:hover tbody {
            animation: none;
            transform: none;
        }

        /* 响应式处理和修复 */
        @media (max-width: 640px) {
            .neu-card:hover {
                transform: translateY(-3px) scale(1.005);
            }
            
            .neu-card.p-0:hover {
                transform: translateY(-2px) scale(1.002);
            }
        }
        
        /* 确保卡片在层叠上下文中正确显示 */
        .grid > div {
            z-index: 1;
        }
        
        .grid > div:hover {
            z-index: 5;
        }
        
        /* 自定义滚动条样式 */
        .custom-scrollbar {
            scrollbar-width: thin; /* Firefox */
            scrollbar-color: rgba(99, 102, 241, 0.2) transparent; /* Firefox */
        }
        
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-track {
            background: transparent;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background-color: rgba(99, 102, 241, 0.2);
            border-radius: 6px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background-color: rgba(99, 102, 241, 0.4);
        }
        
        /* 滚动时显示滚动条 */
        .custom-scrollbar {
            transition: opacity 0.3s;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb {
            opacity: 0;
        }
        
        .custom-scrollbar:hover::-webkit-scrollbar-thumb {
            opacity: 1;
        }
    </style>
</head>
<body x-data="{
    activeFilter: 'all',
    showModal: false,
    currentLog: '',
    currentCaseId: '',
    chartData: {
        labels: ['通过', '失败', '阻塞', '跳过'],
        values: [{{ passed_count }}, {{ failed_count }}, {{ broken_count }}, {{ skipped_count }}],
        colors: ['#5CBA95', '#E88A8A', '#E6B55C', '#7A9FE2']
    }
}" x-init="
    const chartCtx = document.getElementById('donutChart')?.getContext('2d');
    if (chartCtx) {
        new Chart(chartCtx, {
            type: 'doughnut',
            data: {
                labels: chartData.labels,
                datasets: [{
                    data: chartData.values,
                    backgroundColor: chartData.colors,
                    borderWidth: 0,
                    hoverOffset: 8,
                    hoverBorderColor: '#ffffff',
                    hoverBorderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '75%',
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        enabled: true,
                        backgroundColor: 'rgba(0, 0, 0, 0.7)',
                        titleFont: { size: 12 },
                        bodyFont: { size: 12 },
                        padding: 8,
                        cornerRadius: 4,
                        callbacks: {
                            label: (context) => {
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const value = context.raw || 0;
                                const percentage = total > 0 ? ((value / total) * 100).toFixed(1) + '%' : '0%';
                                return `${context.label}: ${value} (${percentage})`;
                            }
                        }
                    }
                },
                animation: {
                    duration: 600,
                    easing: 'easeOutQuart'
                },
                onClick: (event, elements) => {
                    if (elements.length > 0) {
                        const clickedIndex = elements[0].index;
                        const statusMap = ['passed', 'failed', 'broken', 'skipped'];
                        const status = statusMap[clickedIndex];
                        if (status) {
                             Alpine.store('reportData').filterCases(status);
                        }
                    }
                }
            }
        });
    }

    Alpine.store('reportData', {
        activeFilter: 'all',
        filterCases(status) {
            this.activeFilter = status;
        },
        shouldShow(caseResult) {
            const lowerResult = caseResult.toLowerCase();
            return this.activeFilter === 'all' || this.activeFilter === lowerResult;
        }
    });
">

    <div class="container mx-auto px-4 lg:px-8 py-8 max-w-screen-xl">
        <!-- 顶部栏 -->
        <header class="flex items-center justify-between mb-8">
            <div class="flex items-center space-x-3">
                <a href="https://aomaker.cn" target="_blank" title="访问AoMaker官网">
                    <img src="https://picgo2listen.oss-cn-beijing.aliyuncs.com/imgs/aomaker-logo.png" alt="AoMaker Logo" class="h-10 hover:opacity-80 transition-opacity duration-200">
                </a>
            </div>

        </header>

        <!-- 主要内容 - 两栏网格 -->
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8">
            <!-- 左侧 Profile Card - 4/12 宽度 -->
            <div class="lg:col-span-4 fade-in-down" style="animation-delay: 50ms;">
                <div class="neu-card h-full flex flex-col">
                    <!-- 用户/执行信息 -->
                    <div class="flex items-center space-x-4 mb-6">
                        <div class="w-12 h-12 rounded-full bg-aomaker-purple/10 flex items-center justify-center border border-aomaker-purple/20">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-aomaker-purple" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="font-semibold text-gray-800">{{ base_config.tester }}</h3>
                            <p class="text-xs text-gray-500">{{ base_config.note }}</p>
                        </div>
                    </div>

                    <!-- 测试基本信息 -->
                    <div class="space-y-3 text-sm flex-grow">
                        <h3 class="text-lg mb-3">基本信息</h3>
                        <div class="flex justify-between">
                            <span class="text-gray-500">测试环境</span>
                            <span class="font-medium text-gray-700">{{ base_config.current_env }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">测试账号</span>
                            <span class="font-medium text-gray-700">{{ base_config.account }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">BaseURL</span>
                            <span class="font-medium text-gray-700">{{ base_config.base_url }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">开始时间:</span>
                            <span class="font-medium text-gray-700">{{ start_time }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">结束时间:</span>
                            <span class="font-medium text-gray-700">{{ end_time }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-500">运行时长:</span>
                            <span class="font-medium text-gray-700">{{ duration }}</span>
                        </div>
                    </div>

                    <!-- 总计 -->
                    <div class="mt-6 pt-4 border-t border-white/20">
                        <div class="flex items-baseline justify-between">
                            <h4 class="text-gray-500">总计</h4>
                            <div class="flex items-baseline space-x-1">
                                <span class="text-2xl font-bold text-aomaker-purple">{{ total }}</span>
                                <span class="text-xs text-gray-500">个用例</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧 Statistics Card - 8/12 宽度 -->
            <div class="lg:col-span-8 fade-in-down" style="animation-delay: 100ms;">
                 <div class="neu-card h-full flex flex-col">
                     <h2 class="mb-6">测试结果统计</h2>
                     <div class="flex-grow grid grid-cols-1 md:grid-cols-12 gap-6">
                         <!-- 圆环图 -->
                         <div class="md:col-span-6 lg:col-span-5 flex items-center justify-center min-h-[200px]">
                             <div class="w-full max-w-[280px] h-auto relative">
                                 <canvas id="donutChart"></canvas>
                                 <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
                                     {% if total > 0 %}
                                     <span class="text-3xl font-bold text-gray-800">{{ passed_rate }}</span>
                                     <span class="text-xs text-gray-500 mt-1">通过率</span>
                                     {% else %}
                                     <span class="text-lg font-medium text-gray-400">未执行</span>
                                     {% endif %}
                                 </div>
                             </div>
                         </div>
                         <!-- 图例 (Legend) -->
                         <div class="md:col-span-6 lg:col-span-7 flex flex-col justify-center space-y-3">
                             <!-- Passed -->
                             <div class="legend-item" @click="$store.reportData.filterCases('passed')">
                                 <span class="legend-icon bg-status-passed"></span>
                                 <span class="legend-text">通过</span>
                                 <span class="legend-value">{{ passed_count }}</span>
                             </div>
                             <!-- Failed -->
                             <div class="legend-item" @click="$store.reportData.filterCases('failed')">
                                 <span class="legend-icon bg-status-failed"></span>
                                 <span class="legend-text">失败</span>
                                 <span class="legend-value">{{ failed_count }}</span>
                             </div>
                             <!-- Broken -->
                             <div class="legend-item" @click="$store.reportData.filterCases('broken')">
                                 <span class="legend-icon bg-status-broken"></span>
                                 <span class="legend-text">阻塞</span>
                                 <span class="legend-value">{{ broken_count }}</span>
                             </div>
                             <!-- Skipped -->
                             <div class="legend-item" @click="$store.reportData.filterCases('skipped')">
                                 <span class="legend-icon bg-status-skipped"></span>
                                 <span class="legend-text">跳过</span>
                                 <span class="legend-value">{{ skipped_count }}</span>
                             </div>
                         </div>
                     </div>
                 </div>
            </div>
        </div>

        <!-- 结果详情表格 - 全宽 -->
        <div class="mt-8 fade-in-down" style="animation-delay: 150ms;">
            <div class="neu-card p-0 overflow-hidden">
                <div class="flex flex-col md:flex-row md:items-center justify-between px-6 pt-6 pb-4 border-b border-white/20">
                    <h2 class="mb-4 md:mb-0">测试结果详情</h2>
                    <div class="flex flex-wrap gap-2" x-data>
                         <button
                             @click="$store.reportData.filterCases('all')"
                             data-status="all"
                             :class="$store.reportData.activeFilter === 'all' ? 'filter-pill filter-pill-active' : 'filter-pill'"
                             class="focus-ring">
                             所有
                         </button>
                         <button
                             @click="$store.reportData.filterCases('passed')"
                             data-status="passed"
                             :class="$store.reportData.activeFilter === 'passed' ? 'filter-pill filter-pill-active' : 'filter-pill'"
                              style="--status-color: var(--color-success);"
                             class="focus-ring">
                             通过
                         </button>
                         <button
                             @click="$store.reportData.filterCases('failed')"
                             data-status="failed"
                             :class="$store.reportData.activeFilter === 'failed' ? 'filter-pill filter-pill-active' : 'filter-pill'"
                             style="--status-color: var(--color-error);"
                             class="focus-ring">
                             失败
                         </button>
                         <button
                             @click="$store.reportData.filterCases('broken')"
                             data-status="broken"
                             :class="$store.reportData.activeFilter === 'broken' ? 'filter-pill filter-pill-active' : 'filter-pill'"
                             style="--status-color: var(--color-warning);"
                             class="focus-ring">
                             阻塞
                         </button>
                         <button
                             @click="$store.reportData.filterCases('skipped')"
                             data-status="skipped"
                             :class="$store.reportData.activeFilter === 'skipped' ? 'filter-pill filter-pill-active' : 'filter-pill'"
                             style="--status-color: var(--color-info);"
                             class="focus-ring">
                             跳过
                         </button>
                    </div>
                </div>

                <div class="overflow-x-auto custom-scrollbar">
                    <div class="max-h-[60vh] overflow-y-auto custom-scrollbar">
                        <table class="min-w-full">
                            <thead class="select-none">
                                <tr>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider w-2/12">测试类</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider w-2/12">测试用例</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider w-3/12">用例描述</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider w-1/12">时长</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider w-2/12">时间</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider w-1/12">结果</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider w-1/12">操作</th>
                                </tr>
                            </thead>
                            <tbody x-data>
                                {% for case in case_list %}
                                <tr
                                    x-show="$store.reportData.shouldShow('{{ case.result }}')"
                                    x-transition:enter="transition ease-out duration-100"
                                    x-transition:enter-start="opacity-0"
                                    x-transition:enter-end="opacity-100"
                                    class="group"
                                >
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="table-icon flex-shrink-0">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                                                </svg>
                                            </div>
                                            <div class="text-sm text-gray-700 font-medium">{{ case.test_class }}</div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ case.test_method }}</td>
                                    <td class="px-6 py-4 text-sm text-gray-500 max-w-xs truncate" title="{{ case.doc }}">{{ case.doc or '无描述' }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ case.f_duration }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ case.time }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        {% set result_lower = case.result | lower %}
                                        <span class="status-badge"
                                              :class="{
                                                  'bg-status-passed/10 text-status-passed': '{{ result_lower }}' === 'passed',
                                                  'bg-status-failed/10 text-status-failed': '{{ result_lower }}' === 'failed',
                                                  'bg-status-broken/10 text-status-broken': '{{ result_lower }}' === 'broken',
                                                  'bg-status-skipped/10 text-status-skipped': '{{ result_lower }}' === 'skipped'
                                              }">
                                            <span class="status-dot"
                                                  :class="{
                                                      'bg-status-passed': '{{ result_lower }}' === 'passed',
                                                      'bg-status-failed': '{{ result_lower }}' === 'failed',
                                                      'bg-status-broken': '{{ result_lower }}' === 'broken',
                                                      'bg-status-skipped': '{{ result_lower }}' === 'skipped'
                                                  }"></span>
                                            {{ case.result | capitalize }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-center">
                                        <button @click="showModal = true; currentLog = document.getElementById('log-{{ case.case_id }}').innerText; currentCaseId = '{{ case.test_class }}.{{ case.test_method }}'"
                                                class="action-button group-hover:opacity-100 focus-ring"
                                                title="查看日志">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m.75 12l3 3m0 0l3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                                            </svg>
                                        </button>
                                        <div id="log-{{ case.case_id }}" style="display: none;">{{ case.logs }}</div>
                                    </td>
                                </tr>
                                {% else %}
                                <tr>
                                    <td colspan="7" class="px-6 py-16 text-center">
                                        <div class="flex flex-col items-center justify-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-300 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
                                                 <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                                            </svg>
                                            <p class="text-base font-medium text-gray-500">没有找到符合条件的测试结果</p>
                                            <p class="text-sm text-gray-400 mt-1">尝试选择其他过滤条件或等待测试执行。</p>
                                             {% if activeFilter != 'all' %}
                                             <button @click="$store.reportData.filterCases('all')" class="mt-4 text-sm text-aomaker-purple hover:underline focus-ring rounded">显示所有结果</button>
                                             {% endif %}
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="table-footer">
                    <span class="font-medium text-gray-600">总计: <span class="font-bold text-aomaker-purple">{{ total }}</span></span>
                    <span class="flex items-center text-[var(--color-success)]">
                        <span class="h-1.5 w-1.5 rounded-full bg-status-passed mr-1"></span>
                        通过: <span class="font-medium ml-0.5">{{ passed_count }}</span>
                    </span>
                    <span class="flex items-center text-[var(--color-error)]">
                        <span class="h-1.5 w-1.5 rounded-full bg-status-failed mr-1"></span>
                        失败: <span class="font-medium ml-0.5">{{ failed_count }}</span>
                    </span>
                    <span class="flex items-center text-[var(--color-warning)]">
                        <span class="h-1.5 w-1.5 rounded-full bg-status-broken mr-1"></span>
                        阻塞: <span class="font-medium ml-0.5">{{ broken_count }}</span>
                    </span>
                    <span class="flex items-center text-[var(--color-info)]">
                        <span class="h-1.5 w-1.5 rounded-full bg-status-skipped mr-1"></span>
                        跳过: <span class="font-medium ml-0.5">{{ skipped_count }}</span>
                    </span>
                </div>
            </div>
        </div>

        <!-- 页脚 -->
        <footer class="mt-10 py-4 text-center text-xs text-gray-400 bg-white/5 backdrop-blur-sm rounded-xl border border-white/10">
            <p>AoMaker 自动化测试报告 &copy; | 生成时间: {{ end_time }}</p>
        </footer>
    </div>

    <!-- 日志查看模态框 -->
    <div x-show="showModal" class="modal" style="display: none;" x-cloak
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-95">
        <!-- 模态框遮罩 -->
        <div class="modal-overlay" @click="showModal = false"></div>
        <!-- 模态框内容 -->
        <div class="modal-content custom-scrollbar">
            <div class="flex justify-between items-center mb-4">
                 <h3 class="text-lg font-semibold text-gray-800" x-text="'日志详情: ' + currentCaseId"></h3>
                 <button @click="showModal = false" class="modal-close-button focus-ring">
                     <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                     </svg>
                 </button>
            </div>
            <pre class="log-pre max-h-[60vh] custom-scrollbar" x-text="currentLog"></pre>
        </div>
    </div>
</body>
</html>